<template>
    <router-link :to="'/community?id='+community.id">
        <div class="card-container">
            <div class="cover" style="display: inline-block;">
                <el-avatar fit="cover" shape="square" :size="120" :src="community.pic"></el-avatar>
            </div>
            <div class="info" style="">
                <div><span class="community-name">{{ community.name }}</span></div>
                <div style="margin:15px 0px 5px 0px;">
                    <span class="statistic" style="margin-right: 30px;">
                        <i class="el-icon-user-solid"></i>
                        {{ community.joinNum }}
                    </span>
                    <span class="statistic">
                        <i class="el-icon-edit-outline"></i>
                        {{ community.postNum }}
                    </span>
                </div>
                <div>
                    <span class="remark">
                        {{ community.remark }}
                    </span>
                </div>
            </div>

        </div>
    </router-link>
</template>

<script>
export default {
    props: ['community'],
    mounted() {
        ;
    },
}
</script>

<style lang="scss" scoped>
.card-container {
    display: flex;
    width: 380px;
    height: 150px;
    // background-color: aqua;
    // border: 1px solid #87CEFA;
    border: 1px solid #E4E7ED;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.2s linear;
    box-shadow: 3px 3px 3px #E4E7ED;

    &:hover {
        border: 1px solid #87CEFA;
        box-shadow: 5px 5px 3px #E4E7ED;
    }

}

.info {
    margin-left: 15px;
    flex: 1;

    .community-name {
        font-size: 16px;
    }

    .remark {
        font-size: 12px;
        color: #999;
    }
}

.statistic {
    font-size: 12px;

    i {
        font-size: 16px;
    }
}
</style>